<template>
  <div class="control">
    <el-button-group>
      <el-button type="primary" :icon="ZoomIn" title="放大" @click="zoomIn" />
      <el-button type="primary" :icon="ZoomOut" title="缩小" @click="zoomOut" />
      <el-button type="primary" :icon="FullScreen" title="大小适应" @click="zoomReset" />
      <el-button type="primary" :icon="Aim" title="定位还原" @click="translateReset" />
      <el-button type="primary" :icon="Back" title="上一步" :disabled="undoDisable" @click="undo" />
      <el-button
        type="primary"
        :icon="Right"
        title="下一步"
        :disabled="redoDisable"
        @click="redo"
      />
      <el-button type="primary" :icon="Download" title="新建指标" @click="createIncator" />
    </el-button-group>
  </div>
  <el-dialog v-model="isVisible">
    <CreateIndicator
      :data-source-id="props.parameter.id"
      :ids="props.ids"
      :dto="insertByIndicatorDTO"
      @back-close="handleClosed"
      @submit-success="handleSuccess"
    />
  </el-dialog>
</template>
<script lang="ts">
export default { name: "Control" };
</script>
<script setup lang="ts">
import { ZoomIn, ZoomOut, FullScreen, Aim, Back, Right, Download } from "@element-plus/icons-vue";
import LogicFlow from "@logicflow/core";
import { TableListParameter } from "@/api/strategy/strategy-index-database";
import { InsertByIndicatorDTO } from "@/api/strategy/strategyManage";
import CreateIndicator from "../components/setting/createIndicator.vue";
const router = useRouter();
const props = defineProps<{
  lf?: LogicFlow;
  parameter: TableListParameter;
  dataSourceName: string;
  ids: any[];
}>();
const undoDisable = ref(true);
const redoDisable = ref(true);

const insertByIndicatorDTO = ref<InsertByIndicatorDTO>({});

const isVisible = ref(false);

const zoomIn = () => {
  props.lf?.zoom(true);
};

const zoomOut = () => {
  props.lf?.zoom(false);
};

const zoomReset = () => {
  props.lf?.resetZoom();
};

const translateReset = () => {
  props.lf?.translateCenter();
};

const undo = () => {
  props.lf?.undo();
};

const redo = () => {
  props.lf?.redo();
};

const handleClosed = () => {
  isVisible.value = false;
};

const handleSuccess = () => {
  isVisible.value = false;
};

const createIncator = () => {
  isVisible.value = true;
  const nodeDatas = props.lf?.getGraphData() as any[];
  nodeDatas.nodes.forEach((item: any) => {
    console.log(item);
    if (item.type == "add_operate") {
      insertByIndicatorDTO.value.aggregationMethod = item.properties.aggregationMethod;
    }
    if (item.type == "indicatorConfig_operate") {
      insertByIndicatorDTO.value.dimensionIds = item.properties.selectedDimensionIds;
      insertByIndicatorDTO.value.timeColumnIds = item.properties.selectedTimeIds;
    }
  });
  console.log(insertByIndicatorDTO.value);
};

onMounted(() => {
  props.lf &&
    props.lf.on("history:change", ({ data }) => {
      undoDisable.value = !data.undoAble;
      redoDisable.value = !data.redoAble;
    });
});
</script>
<style lang="scss" scoped>
.control {
  position: absolute;
  bottom: 0;
  left: 150px;
}
</style>
